<template>
  <el-table-column :prop="prop" :resizable="resizable" :sortable="sortable?'custom':false" :width="width" :show-overflow-tooltip="true" :align="align">
    <template slot="header">
      <span class="tooltip-header" v-if="tips">
        {{label}}
        <el-tooltip effect="Light" placement="top">
          <div slot="content" class="tooltip-header-content" v-html="tips">
          </div>
          <i class="el-icon-question" />
        </el-tooltip>
      </span>
      <span v-else>
        {{label}}
      </span>
    </template>
    <template slot-scope="scope">
      <slot :scope="scope" :row="scope.row" />
    </template>
  </el-table-column>
</template>
<script>
export default {
  props: {
    label: {
      type: String,
      default: "文本内容"
    },
    prop: {
      type: String,
      default: "name"
    },
    sortable: {
      type: Boolean,
      default: false
    },
    width: {
      type: [String, Number],
      default: ""
    },
    align: {
      type: String,
      default: "center"
    },
    tips: {
      type: String,
      default: ""
    },
    icon: {
      type: String,
      default: "el-icon-question"
    },
    resizable: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../style/variables.scss";

.tooltip-header-content {
  padding: 20px 20px;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid $tx-tooltip-shadow;
  box-shadow: 5px 5px 5px $tx-tooltip-shadow;
}
</style>
